<template>
  <div class="user-list">
    <search-list
      ref="attrList"
      :api-url="$url.MallAttrList"
      :option="searchOpt"
      :itemPerRow="6"
      :beforeQuery="beforeQuery"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="属性名称"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="style" label="填写方式">
        <template slot-scope="scope">
          {{ $selectFormat['goodsMangeInput'](scope.row.style).label }}
        </template>
      </el-table-column>
      <el-table-column prop="required" label="是否必填">
        <template slot-scope="scope">
          {{ scope.row.required ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="enabled" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.enabled ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button v-if="!scope.row.enabled" type="text" @click="attrEnable(scope.row)">
            启用
          </el-button>
          <el-button v-else type="text" @click="attrDisable(scope.row)">禁用</el-button>
          <el-button type="danger" @click="delAttr(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after">
        <el-button type="primary" @click="dialogVisibleAttr = true">
          添加属性
        </el-button>
        <el-button type="primary" @click="delAttr()" :disabled="selectedData.length < 1">
          批量删除
        </el-button>
      </div>
    </search-list>
    <el-dialog
      :visible="dialogVisibleAttr"
      title="添加属性"
      width="60%"
      @close="dialogClose"
      :append-to-body="true"
      :destroy-on-close="true"
    >
      <el-form
        :model="attrForm"
        :rules="attrbuteRule"
        label-width="80px"
        label-position="right"
        ref="attrForm"
      >
        <el-form-item prop="title" label="名称">
          <el-input v-model="attrForm.title"></el-input>
        </el-form-item>
        <el-form-item prop="unit" label="单位">
          <el-input v-model="attrForm.unit"></el-input>
        </el-form-item>
        <el-form-item prop="style" label="填写方式">
          <goods-mange-input v-model="attrForm.style"></goods-mange-input>
        </el-form-item>
        <el-form-item prop="required" label="是否必填">
          <el-radio-group v-model="attrForm.required">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="enabled" label="状态">
          <el-radio-group v-model="attrForm.enabled">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="属性值" v-if="isSRC">
          <el-table :data="attrTableData" style="width: 100%" border ref="attrValueList">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="attrValue" label="属性值">
              <template slot-scope="scope">
                <!-- 这也是一种写法 -->
                <!-- <el-input v-model="scope.row.attrValue" @input="(val)=>inputAttr(scope.row,val)"></el-input> -->
                <el-input v-model="scope.row.attrValue"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" @click="delValueAttr(scope.row, scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="addValueAttr">添加属性值</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">关 闭</el-button>
        <el-button type="primary" @click="saveAll" :loading="allLoading">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { FormRuleConf } from '@/config';
  export default {
    data() {
      return {
        rr: '',
        // 多选
        selectedData: [],
        // dialog显隐
        dialogVisibleAttr: false,
        // 表单
        attrForm: {},
        // 表单验证
        ...FormRuleConf.MallAttrbute,
        // 保存所有数据的loading
        allLoading: false,
        // 保存属性之后返回的id
        attrId: '',
        // 属性值的表格
        attrTableData: [],
        // 属性筛选
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '属性名称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'id',
            label: '属性ID',
          },
        ],
      };
    },
    computed: {
      isSRC: function() {
        return (
          this.attrForm.style === 'select' ||
          this.attrForm.style === 'radio' ||
          this.attrForm.style === 'checkbox'
        );
      },
    },
    methods: {
      // dialog关闭
      dialogClose() {
        this.dialogVisibleAttr = false;
        this.attrForm = {};
        this.attrTableData = [];
        this.$refs.attrForm.resetFields();
      },
      // 编辑
      edit(row) {
        this.$service.MallAttrInfo({ id: row.id }).then((res) => {
          this.dialogVisibleAttr = true;
          this.attrForm = res;
          this.attrTableData = res.attrValues;
        });
      },
      // 保存属性值
      saveValues(row) {
        if (this.attrTableData.length > 0) {
          // 数据处理
          this.attrTableData.forEach((item) => {
            item.attrId = this.attrId;
          });
          this.$service.MallAttrValuesSave(this.attrTableData, JSON_HEADER).then((res) => {
            this.allLoading = false;

            this.$message.success('保存成功');
            this.attrId = '';
            // 清空表单啥的
            this.attrForm = {};
            this.attrTableData = [];

            this.dialogVisibleAttr = false;
            // 刷新表单
            this.$refs.attrList.getList();
          });
        } else {
          this.allLoading = false;

          this.$message.success('保存成功');
          this.attrId = '';
          // 清空表单啥的
          this.attrForm = {};
          this.attrTableData = [];

          this.dialogVisibleAttr = false;
          // 刷新表单
          this.$refs.attrList.getList();
        }
      },
      // 保存所有
      saveAll() {
        this.$refs.attrForm.validate((valid) => {
          if (valid) {
            this.allLoading = true;
            this.$service.MallAttrSave(this.attrForm).then((res) => {
              this.attrId = res;
              // 取到属性id之后去保存属性值
              this.saveValues();
            });
          }
        });
      },
      // 添加属性值
      addValueAttr() {
        this.attrTableData.push({ id: '', attrValue: '' });
      },
      // 删除属性值
      delValueAttr(row, index) {
        // 有id就是保存在数据库里的，就发请求删除
        if (row.id) {
          this.$service.MallAttrValueDelete({ ids: row.id }).then((res) => {
            this.attrTableData = this.attrTableData.filter((item, inde) => index !== inde);
            this.$message.success('删除成功');
          });
        } else {
          this.attrTableData = this.attrTableData.filter((item, inde) => index !== inde);
          this.$message.success('删除成功');
        }
      },
      // 禁用属性
      attrDisable(row) {
        this.$service.MallAttrDisable({ id: row.id }).then((res) => {
          this.$message.success('操作成功');
          this.$refs.attrList.getList();
        });
      },
      // 启用属性
      attrEnable(row) {
        this.$service.MallAttrEnable({ id: row.id }).then((res) => {
          this.$message.success('操作成功');
          this.$refs.attrList.getList();
        });
      },
      // 移除属性
      delAttr(val) {
        this.$confirm('确定要将选中的属性从属性列表移除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$service
              .MallAttrDelete({
                ids: val.id
                  ? val.id
                  : this.selectedData
                      .map((item) => {
                        return item.id;
                      })
                      .join(','),
              })
              .then((res) => {
                this.$message.success('属性移除成功！');
                this.$refs.attrList.getList();
              });
          })
          .catch(() => {});
      },
      // 多选
      selectionChange(val) {
        this.selectedData = [...val];
      },
      // 筛选之前
      beforeQuery({ searchInfo }) {},
    },
  };
</script>
<style lang="less" scoped>
  .avatar {
    display: inline-block;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }
  .goods {
    width: 80px;
    height: 60px;
    border-radius: 0px;
  }
</style>
